import React from 'react';
import { observer } from 'mobx-react';
import { WeaDialog, WeaRightMenu, WeaNewScroll, WeaFormItem, WeaSearchGroup } from "ecCom"
import { Button } from "antd"
import { WeaSwitch } from "comsMobx"
import { toJS } from "mobx"
import { WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class CptMend extends React.Component {
    render() {
        const { showmend } = this.props.contentStore;
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@939tmy`}
                title={getLabel(83557, "送修")}
                visible={showmend}
                buttons={this.getBottomButtons()}
                icon="icon-coms-fa"
                iconBgcolor="#f14a2d"
                onCancel={this.closeMend}
                style={{ width: 700, height: 420 }}
            >
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@kq0wwk`} datas={this.getRightMenu()} onClick={this.onRightMenuClick.bind(this)}  >
                    <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@nw434u`} height={"100%"}>
                        {this.getFormItems()}
                    </WeaNewScroll>
                </WeaRightMenu>
            </WeaDialog>
        )
    }

    closeMend = () =>{
        const { contentStore, type = "" } = this.props;
       contentStore.doMend(false);
    }

    getBottomButtons() {
        const { contentStore, type = "",callBack } = this.props;
        let btnArr = [];
        btnArr.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@oxn8hg@mend`} type="primary" onClick={() => { contentStore.doCptMendSure(type,callBack); }}>{getLabel(83602, '确认送修')}</Button>)
        btnArr.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@in8uvt@close`} type="primary" onClick={() => { contentStore.doMend(false) }}>{getLabel(309, '关闭')}</Button>)
        return btnArr;
    }
    getRightMenu() {
        let btns = [];
        btns.push({
            icon: <i className='icon-coms-Upload-successfully' />,
            content: getLabel(83602, '确认送修'),
            key: 0
        });
        return btns
    }
    onRightMenuClick(key) {
        const { contentStore, type = "",callBack } = this.props;
        if (Number(key) == 0) {
            contentStore.doCptMendSure(type,callBack); 
        }
    }
    getFormItems = () => {
        const { mendInfo, mendForm } = this.props.contentStore;
        const { isFormInit } = mendForm;
        let group = [];
        const formParams = mendForm.getFormParams();
        isFormInit && mendInfo.map((c,i) => {
            let items = [];
            c.items.map((fields, index) => {
                let hasunderline = false;
                if (fields.viewAttr == "1" || (fields.conditionType == "BROWSER" && fields.browserConditionParam.viewAttr == "1")) {
                    hasunderline = true 
                }
                if(hasunderline){
                    items.push({
                        com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@6jkx2p@${index}`}
                            label={`${fields.label}`}
                            labelCol={{ span: `${fields.labelcol}` }}
                            wrapperCol={{ span: `${fields.fieldcol}` }} underline>
                            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@85mi0e@${index}`} fieldConfig={fields} form={mendForm} />
                        </WeaFormItem>),
                        colSpan: 1,
                    })
                }else{
                    items.push({
                        com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@l7tpsq@${index}`}
                            error={mendForm.getError(fields)}
                            tipPosition="bottom"
                            label={`${fields.label}`}
                            labelCol={{ span: `${fields.labelcol}` }}
                            wrapperCol={{ span: `${fields.fieldcol}` }}>
                            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@qzwoy2@${index}`} fieldConfig={fields} form={mendForm} />
                        </WeaFormItem>),
                        colSpan: 1,
                    })
                }
                
            });
            group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@mjoys5@${i}`} needTigger={true} title={c.title} col={1} showGroup={c.defaultshow} items={items} />)
        });
        return group;
    }
}